<template>
  <Card>
    <div class="searchBox">
      <Form
        id="searchForm"
        ref="searchForm"
        :label-width="90"
        :model="searchForm"
        class="search-form"
        inline>
        <Form-item label="车牌号：" prop="license_plate_num">
          <Input
            v-model="searchForm.license_plate_num"
            clearable
            placeholder="支持模糊搜索"
            style="width: 200px"
            type="text"
          />
        </Form-item>
        <Form-item label="车辆品牌：" prop="brand">
          <Select v-model="searchForm.brand" clearable style="width:150px">
            <Option value="-1">全部</Option>
            <Option value="0">东风牌</Option>
            <Option value="1">亚星牌</Option>
            <Option value="2">宇通牌</Option>
            <Option value="3">中通牌</Option>
          </Select>
        </Form-item>
        <Form-item label="车辆类型：" prop="type">
          <Select v-model="searchForm.type" clearable style="width:150px">
            <Option value="-1">全部</Option>
            <Option value="0">燃气车</Option>
            <Option value="1">纯电动</Option>
          </Select>
        </Form-item>
        <Form-item label="车辆状态：" prop="is_scrap">
          <Select v-model="searchForm.is_scrap" clearable style="width:150px">
            <Option value="-1">全部</Option>
            <Option value="0">使用中</Option>
            <Option value="1">已报废</Option>
          </Select>
        </Form-item>
        <Form-item style="margin-left:-90px;">
          <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
          <Button @click="handleReset">重置</Button>
        </Form-item>
      </Form>
    </div>
    <div id="generate" class="btns">
      <Button icon="ios-add" target="_self" type="primary" @click="toAdd">添加</Button>
      <upload-file ref="uploadBusFile" button-name="导入" @on-change="uploadData($event)"></upload-file>
      <Button disabled icon="md-cloud-download">导出</Button>
      <Button icon="md-trash" type="error" @click="delAll">删除</Button>
    </div>
    <div class="table">
      <vxe-table
        ref="xTable"
        :data="data"
        :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
        :height="height"
        :loading="loading"
        :scroll-y="scrollY"
        align="center"
        border
        highlight-cell
        keep-source
        resizable
        show-footer
        show-overflow
        size="mini"
        @checkbox-change="selectChangeEvent"
      >
        <vxe-table-column fixed="left" type="checkbox" width="60"></vxe-table-column>
        <vxe-table-column fixed="left" type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="license_plate_num" fixed="left" sortable title="车牌号" width="150"></vxe-table-column>
        <vxe-table-column field="type" fixed="left" sortable title="车辆类型" width="150"></vxe-table-column>
        <vxe-table-column field="batch" sortable title="购买批次" width="150"></vxe-table-column>
        <vxe-table-column field="brand" sortable title="车辆品牌" width="150"></vxe-table-column>
        <vxe-table-column field="is_scrap" sortable title="车辆状态" width="150">
          <template v-slot="{ row }">
            <vxe-button v-if="row.is_scrap==0" round status="success">使用中</vxe-button>
            <vxe-button v-if="row.is_scrap==1" round status="danger">已报废</vxe-button>
          </template>
        </vxe-table-column>
        <vxe-table-column field="model" sortable title="规格型号" width="150"></vxe-table-column>
        <vxe-table-column field="engine_num" sortable title="发动机号" width="150"></vxe-table-column>
        <vxe-table-column field="frame_nun" sortable title="车架号" width="150"></vxe-table-column>
        <vxe-table-column field="original" sortable title="原值" width="150"></vxe-table-column>
        <vxe-table-column field="discount" sortable title="折扣额" width="150"></vxe-table-column>
        <vxe-table-column field="net_worth" sortable title="净值" width="150"></vxe-table-column>
        <vxe-table-column field="old_license_plate_num" sortable title="旧车牌" width="150"></vxe-table-column>
        <vxe-table-column field="issue_at" sortable title="发证日期" width="150"></vxe-table-column>
        <vxe-table-column field="max_num" sortable title="核载人数" width="150"></vxe-table-column>
        <vxe-table-column field="start_use_at" sortable title="开始使用时间" width="150"></vxe-table-column>
        <vxe-table-column field="length" sortable title="车长" width="150"></vxe-table-column>
        <vxe-table-column field="voucher" sortable title="凭证号" width="150"></vxe-table-column>
        <vxe-table-column fixed="right" show-overflow title="操作" width="150">
          <template v-slot="{ row }">
            <vxe-button icon="fa fa-edit" style="color:#2d8cf0;font-size: 12px;" type="text" @click="edit(row)">编辑
            </vxe-button>
            <vxe-button icon="fa fa-trash-o" style="color:#ed4014;font-size: 12px;" type="text" @click="del(row)">删除
            </vxe-button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <Modal v-model="modal" :closable="false" :mask-closable="false" width="360">
      <p slot="header" style="color:#2d8cf0;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>文件上传成功，正在导入数据</span>
      </p>
      <div style="text-align:center">
        <Button :loading="importLoading" long size="large" type="error">导入中...</Button>
      </div>
      <div slot="footer"></div>
    </Modal>
  </Card>
</template>
<script>
import './vehicle.css'
import {busList, destroy, importBus} from '../../api/bus'
import UploadFile from '../my-components/upload-file'

export default {
  components: {
    UploadFile
  },
  data() {
    return {
      modal: false,
      importLoading: false,
      height: 450,
      total: 0,
      scrollY: {gt: 30},
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      searchForm: {
        brand: '-1',
        type: '-1',
        is_scrap: '-1',
        license_plate_num: '',
        // pageNumber: 1, // 当前页数
        // pageSize: 10 // 页面大小
      },
      loading: false,
      data: [],
      checkList: [
        {label: '否', value: '0'},
        {label: '是', value: '1'}
      ]
    }
  },
  watch: {
    $route(to, from) {
      if (from.name !== 'vehicle') {
        this.handleReset()
      }
    }
  },
  mounted() {
    this.init()
    const body_h = document.body.clientHeight
    const form_h = document.getElementById('searchForm').offsetHeight
    const row_h = document.getElementById('generate').offsetHeight
    this.height = body_h - form_h - row_h - 200
  },
  methods: {
    // changePage(v) {
    //   this.searchForm.pageNumber = v
    //   this.getBusList()
    //   // this.clearSelectAll()
    // },
    // clearSelectAll() {
    //   this.$refs.xTable.selectAll(false)
    // },
    formatterCheck({cellValue}) {
      return this.checkList[cellValue].label
    },
    del(row) {
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除此条数据吗？',
        onOk: () => {
          const ids = row.id
          // 批量删除
          destroy(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getBusList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除所选的 ' + this.selectCount + ' 条数据？',
        onOk: () => {
          let ids = ''
          this.selectList.forEach(function (e) {
            ids += e.id + ','
          })
          ids = ids.substring(0, ids.length - 1)
          // 批量删除
          destroy(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getBusList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    edit(row) {
      this.$router.push({
        name: 'editVehicle',
        params: {
          id: row.id
        }
      })
    },
    getBusList() {
      const id = this.$route.params.id
      const param_type = this.$route.params.param_type
      if (param_type == 'edit') {
        busList(this.searchForm).then(res => {
          if (res.data) {
            this.data = res.data.personnel
          }
        })

      } else {
        this.loading = true
        // this.clearSelectAll()
        busList(this.searchForm).then(res => {
          this.loading = false
          if (res.data) {
            this.data = res.data.personnel
            // this.total = res.data.count
          }
        })
      }
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      // this.searchForm.pageNumber = 1
      // this.searchForm.pageSize = 10
      // 重新加载数据
      this.getBusList()
    },
    handleSearch() {
      // this.searchForm.pageNumber = 1
      // this.searchForm.pageSize = 10
      this.getBusList()
    },
    init() {
      this.getBusList()
    },
    showSelect(e) {
      this.selectList = e
      this.selectCount = e.length
    },
    toAdd() {
      this.$router.push({
        name: 'addVehicle'
      })
    },
    selectChangeEvent({checked, records}) {
      this.selectList = records
      this.selectCount = records.length
    },
    uploadData(event) {
      this.modal = true
      this.importLoading = true
      importBus({url: event.url}).then(res => {
        if (res.data) {
          this.$Message.success(res.message)
          this.getBusList()
        } else {
          this.$Message.error(res.message)
        }
        this.modal = false
        this.importLoading = false
      })
    }
  }
}
</script>
